<template>
  <div class="store-apply-wrap">

    <div class="store-item-content-box">
      <div class="item-content">
        <span class="item-content-title">门店类型</span>
        <van-radio-group v-model="storeType" class="store-radio-box">
          <van-radio name="1" checked-color="#3cafff" @click="storeType = '1'"
                     :class="{'store-type-active': storeType == '1'}" class="store-radio-type">加盟店
          </van-radio>
          <van-radio name="2" checked-color="#3cafff" @click="storeType = '2'"
                     :class="{'store-type-active': storeType == '2'}">直营店
          </van-radio>
        </van-radio-group>
      </div>
    </div>

    <div class="store-item-content-box">
      <div class="item-content">
        <span class="item-content-title">主要招工类型</span>
        <popup-picker :data="workTypeList" v-model="workType" class="work-type-pop"
                      placeholder="请选择主要招工类型"></popup-picker>

        <img src="../../../images/in.png" class="pic3"/>
      </div>
    </div>

    <div class="store-item-content-box">
      <div class="item-content">
        <span class="item-content-title">主要招工区域</span>
        <x-address :title="title" v-model="wordAddress" :list="addressData" placeholder="请选择主要招工区域"
                   @on-hide="selectArea"
                   id="belongAddress" class="address-box"></x-address>

        <img src="../../../images/in.png" class="pic3"/>
      </div>
    </div>

    <div class="store-item-content-box">
      <div class="item-content">
        <span class="item-content-title">是否有实体门店</span>
        <van-radio-group v-model="realShop" class="store-radio-box real-shop">
          <van-radio name="0" checked-color="#3cafff" @click="realShop = '0'"
                     :class="{'store-type-active': realShop == '0'}" class="store-radio-type">是
          </van-radio>
          <van-radio name="1" checked-color="#3cafff" @click="realShop = '1'"
                     :class="{'store-type-active': realShop == '1'}">否
          </van-radio>
        </van-radio-group>
      </div>
    </div>

    <div class="shop-address-box" v-show="realShop == 0">
      <div class="store-item-content-box">
        <div class="item-content">
          <span class="item-content-title">门店地址</span>
          <x-address :title="title2" v-model="shopAddress" :list="addressData" placeholder="请选择门店地址"
                     @on-hide="selectArea2"
                     id="belongAddress2" class="address-box shop-address"></x-address>

          <img src="../../../images/in.png" class="pic3"/>
        </div>
      </div>

      <div class="shop-address-detail-box">
        <span class="shop-address-title">详细地址</span>
        <div class="shop-address-con">
          <textarea placeholder="请输入门店详细地址" class="address-detail" maxlength="25"
                    v-model="shopAddressDetail"></textarea>
        </div>
      </div>
    </div>

    <button class="sure-text" type="button" @click="applyStore">提&nbsp;&nbsp;交</button>

  </div>
</template>

<script>
  import {PopupPicker} from 'vux'
  import {ChinaAddressV4Data, XAddress} from 'vux'
  import {insertShopApply} from "../../../axios/api";

  export default {
    data() {
      return {
        storeType: "",
        workType: [],
        workTypeList: [['学生工', '社会工', '农民工', '少数民族']],
        title: '',
        wordAddress: [],
        title2: '',
        shopAddress: [],
        addressData: ChinaAddressV4Data,
        realShop: "",
        shopAddressDetail: "",
        userMark: ""
      }
    },
    created() {
      let base64 = require('js-base64').Base64;
      this.userMark = base64.decode(sessionStorage.getItem("userMark"));
    },
    methods: {
      changeWorkType() {
        let type = String(this.workType);
        if (type == '学生工') {
          return 1;
        } else if (type == '社会工') {
          return 2;
        } else if (type == '农民工') {
          return 3;
        } else if (type == '少数民族') {
          return 4;
        }
      },
      checkApplyStore() {
        if (this.storeType == "" || this.storeType == null || this.storeType == undefined) {
          this.$vux.toast.text("请选择门店类型", "middle");
          return;
        }
        if (String(this.workType) == "" || String(this.workType) == null || String(this.workType) == undefined) {
          this.$vux.toast.text("请选择主要招工类型", "middle");
          return;
        }
        if (String(this.wordAddress) == "" || String(this.wordAddress) == null || String(this.wordAddress) == undefined) {
          this.$vux.toast.text("请选择主要招工区域", "middle");
          return;
        }
        if (this.realShop == "" || this.realShop == null || this.realShop == undefined) {
          this.$vux.toast.text("请选择门店类型", "middle");
          return;
        }
        if (this.realShop == 0) {
          if (String(this.shopAddress) == "" || String(this.shopAddress) == null || String(this.shopAddress) == undefined) {
            this.$vux.toast.text("请选择门店地址", "middle");
            return;
          }
          if (this.shopAddressDetail == "" || this.shopAddressDetail == null || this.shopAddressDetail == undefined) {
            this.$vux.toast.text("请输入门店详细地址", "middle");
            return;
          }
        }
        return true;
      },
      applyStore() {//申请提交
        let address1 = document.getElementById("belongAddress").innerText.substring(0, 9);
        let area1 = address1 == "请选择主要招工区域" ? "" : document.getElementById("belongAddress").innerText; //主要招工区域
        let address2 = document.getElementById("belongAddress2").innerText.substring(0, 7);
        let area2 = address2 == "请选择门店地址" ? "" : document.getElementById("belongAddress2").innerText; //门店地址


        if (this.checkApplyStore()) {
          this.$vux.loading.show({
            text: '加载中',
          });

          let data = {
            "sgin": this.userMark,
            "shopType": parseInt(this.storeType),
            "workType": this.changeWorkType(),
            "workRange": area1.replace(/\s+/g, ""),
            "realShop": this.realShop,
            "shopAddress": this.realShop == 0 ? area2.replace(/\s+/g, "") : "",
            "extAddress": this.realShop == 0 ? this.shopAddressDetail : ""
          };

          insertShopApply(data).then((res) => {
            this.$vux.loading.hide();
            if (res.code == 0) {
              if (res.data == 1) {
                this.$router.push("/applyStoreRecord");
              } else {
                this.$vux.toast.text("门店申请提交失败，请重试", "middle");
              }
            } else {
              this.$vux.toast.text(res.msg, "middle");
            }
          });
        }
      },
      selectArea(type, value) {//选择主要招工区域
        if (type) {
          let array = value.split(" ");
          for (let i = 0; i < array.length; i++) {
            if (array[i] == "市辖区") {
              this.wordAddress.splice(1, i);
            }
          }
        }
      },
      selectArea2(type, value) {//选择门店地址
        if (type) {
          let array = value.split(" ");
          for (let i = 0; i < array.length; i++) {
            if (array[i] == "市辖区") {
              this.shopAddress.splice(1, i);
            }
          }
        }
      },
    },
    components: {
      PopupPicker,
      XAddress
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .store-apply-wrap {
    .wh(100%, 100%);
    background: @talent-theme-bg-color;
    .store-item-content-box {
      .wh(100%, 1.333rem);
      background: #FFF;
      display: flex;
      .item-content {
        position: relative;
        margin-left: 0.32rem;
        display: flex;
        align-items: center;
        .wh(96.8%, 1.333rem);
        border-bottom: 0.027rem solid rgba(242, 242, 242, 1);
        .item-content-title {
          .size-color(0.427rem, rgba(51, 51, 51, 1));
        }
        .pic3 {
          margin-left: auto;
          margin-right: 0.32rem;
          .wh(0.32rem, 0.32rem);
        }
        .store-radio-box {
          display: flex;
          margin-left: 1.773rem;
          .store-radio-type {
            margin-right: 0.8rem;
          }

          .store-type-active /deep/ .van-radio__label {
            color: #3CAFFF;
          }
        }
        .real-shop {
          margin-left: 0.493rem;
        }

        .work-type-pop {
          display: flex;
          align-items: center;
          margin-left: auto;
          margin-right: 0.36rem;
          .size-color(0.427rem, rgba(102, 102, 102, 1));
          flex: 1
        }
        .work-type-pop /deep/ .vux-tap-active {
          padding: 0;
          width: 100%;
        }
        .work-type-pop /deep/ .vux-cell-primary .vux-popup-picker-select {
          margin-left: 0.92rem;
        }
        .work-type-pop /deep/ .vux-cell-primary .vux-popup-picker-placeholder {
          color: #ccc;
        }
        .work-type-pop /deep/ .weui-cell .vux-popup-picker-value,.vux-cell-value {
          color: rgba(68, 68, 68, 1);
        }

        .address-box {
          .ellipsis(53%);
          display: flex;
          padding-top: 0.1rem;
          padding-bottom: 0.1rem;
          margin-left: 0.92rem;
          .size-color(0.427rem, #333333)
        }
        .address-box /deep/ .vux-tap-active {
          padding: 0;
          width: 100%;
        }
        .address-box /deep/ .weui-cell .vux-popup-picker-placeholder {
          color: #cccccc;
        }
        .address-box /deep/ .weui-cell .vux-popup-picker-value,.vux-cell-value {
          color: rgba(68, 68, 68, 1);
        }
        .shop-address {
          margin-left: 1.773rem;
        }
      }
    }
    .shop-address-detail-box {
      .wh(100%, 1.84rem);
      display: flex;
      background: #FFF;
      .shop-address-title {
        padding-top: 0.453rem;
        margin-left: 0.32rem;
        .size-color(0.427rem, rgba(51, 51, 51, 1));
      }
      .shop-address-con {
        display: flex;
        align-items: flex-start;
        margin-left: 1.68rem;
        padding-top: 0.453rem;
        flex: 1;
        .address-detail {
          resize: none;
          border: none;
          flex: 1;
          margin-right: 0.32rem;
          .size-color(0.427rem, #333);
        }
      }
    }
    .sure-text {
      .fj(center, center);
      margin: 1.2rem auto 0;
      .wh(9.04rem, 1.333rem);
      background: rgba(60, 175, 255, 1);
      border-radius: 0.107rem;
      .size-color(0.48rem, rgba(255, 255, 255, 1));
    }
  }
</style>
